<template>
  <view>
    <el-card class="!border-none mt-4" shadow="never">
      <el-form
        ref="formRef"
        :model="formData"
        label-width="160px"
        :rules="formRules"
      >
        <el-form-item label="加载页图片" prop="backgroundImg">
          <material-picker v-model="formData.backgroundImg" :limit="1" />
        </el-form-item>
        <el-form-item label="客服电话" prop="phone">
          <el-input
            class="w-80"
            v-model="formData.phone"
            placeholder="请输入客服电话"
          />
        </el-form-item>
        <el-form-item label="公告" prop="notice">
          <el-input
            class="w-80"
            v-model="formData.notice"
            placeholder="请输入公告"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 5 }"
            maxlength="100"
            show-word-limit
            clearable
          />
        </el-form-item>
        <el-form-item label="直播摄像头" prop="hasCamera">
          <el-switch v-model="formData.hasCamera" />
        </el-form-item>
        <el-form-item label="菜单更新时间" prop="menuUpdateTime">
          <el-input
            class="w-80"
            placeholder="菜单更新时间"
            :formatter="(value: string) => value.replace('：', ':')"
            v-model="formData.menuUpdateTime"
          />
        </el-form-item>
      </el-form>
      <view style="padding-left: 200px"
        ><el-button style="width: 150px" type="primary" @click="handelSave"
          >保存</el-button
        ></view
      >
    </el-card>
  </view>
</template>
<script lang="ts" setup name="h5Config">
import type { FormInstance } from "element-plus";
import { getMnpConfig, setMnpConfig } from "@/api/admin/index";
import feedback from "@/utils/feedback";

const formRef = shallowRef<FormInstance>();
const formData = reactive<any>({
  backgroundImg: "",
  phone: "",
  notice: "",
  hasCamera: true,
  menuUpdateTime: "18:00",
});

const formRules = {
  backgroundImg: [
    {
      required: true,
      message: "请设置加载页图片",
      trigger: ["blur"],
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入客服电话",
      trigger: ["blur"],
    },
  ],
  notice: [
    {
      required: true,
      message: "请输入公告",
      trigger: ["blur"],
    },
  ],
  menuUpdateTime: [
    {
      required: true,
      message: "菜单更新时间",
      trigger: ["blur"],
    },
  ],
};

const getDetail = async () => {
  const data = await getMnpConfig();
  for (const key in formData) {
    formData[key] = key === "hasCamera" ? data[key] === "1" : data[key];
  }
};

const handelSave = async () => {
  await formRef.value?.validate();
  const params = {
    ...formData,
  };
  params.hasCamera = formData.hasCamera ? 1 : 0;
  await setMnpConfig(params);
  feedback.msgSuccess("操作成功");
};

getDetail();
</script>
